<template>
  <div>
    <PageTools>
      <template #left>{{ `共${total}条记录` }}</template>
      <template #right>
        <!-- 右侧 -->
        <el-button
          type="primary"
          size="small"
          @click="$router.push('/import')"
        >导入excel</el-button>
        <el-button
          type="primary"
          size="small"
          @click="exportExcel"
        >导出excel</el-button>
        <el-button
          type="primary"
          size="small"
          @click="showDialog"
        >新增员工</el-button>
      </template>
    </PageTools>
    <!-- 表格区域 -->
    <el-card style="margin-top: 10px">
      <el-table :data="list" border>
        <el-table-column label="序号" width="60" type="index" />
        <el-table-column label="姓名" prop="username" />
        <el-table-column label="工号" prop="workNumber" />
        <!-- 如果是一个对象 获取对象中的属性 属性是可以变的 此时应该应用对象[属性key]得到value的值
            如果对象中取得属性不需要改变 可以通过对象.属性 -->
        <el-table-column label="聘用形式" prop="formOfEmployment">
          <template #default="scope">
            {{ hireMap[+scope.row.formOfEmployment] || "未知" }}
          </template>
        </el-table-column>
        <el-table-column label="部门" prop="departmentName" />
        <el-table-column label="入职时间" width="180" prop="timeOfEntry">
          <template #default="scope">
            {{ formateTime(scope.row.timeOfEntry) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="200">
          <template #default="{ row }">
            <el-button type="text" size="small">查看</el-button>
            <el-button type="text" size="small">分配角色</el-button>
            <el-button
              type="text"
              size="small"
              @click="del(row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" align="middle" justify="center" style="height: 60px">
        <el-pagination
          layout="total,prev,pager,next"
          :page-size="pageOption.size"
          :total="total"
          :current-page="pageOption.page"
          hide-on-single-page
          @current-change="currentChangeFn"
        />
      </el-row>
    </el-card>
    <AddDialog
      :dialog-visible="dialogVisible"
      @close="closeDialog"
      @refresh="refresh"
    />
  </div>
</template>

<script>
import AddDialog from './components/add-dialog.vue'
import dayjs from 'dayjs'
import { getEmployeeList, delEmployee } from '@/api/employee'
export default {
  components: {
    AddDialog
  },
  data() {
    return {
      list: [], // 表格数据
      pageOption: {
        page: 1,
        size: 10
      },
      total: 0,
      // 把表格聘用形式的1/2的数字转换成对于的文字
      hireMap: {
        1: '正式',
        2: '非正式'
      },
      dialogVisible: false // 控制新增员工弹出层
    }
  },
  created() {
    this.getEmployeeList()
  },
  methods: {
    exportExcel() {
      // 动态引入 @/vendor/Export2Excel 文件
      import('@/vendor/Export2Excel').then(async(excel) => {
        // 转换格式//[{},{}]==>[[],[]]
        // 数据转换--表头格式默认
        const headerArr = [
          '姓名',
          '手机号',
          '入职日期',
          '工号',
          '聘用形式',
          '部门'
        ]
        // 中英对照关系--需要把后端数据的属性名变成中文得到属性值
        const headerRelation = {
          姓名: 'username',
          手机号: 'mobile',
          入职日期: 'timeOfEntry',
          工号: 'workNumber',
          聘用形式: 'formOfEmployment',
          部门: 'departmentName'
        }
        // 1.1. // 调用员工列表接口，获取要导出的员工列表
        const res = await getEmployeeList(this.pageOption)
        // 根据员工列表数据、表头、中英文对应关系，将数据转换成二维数组
        const twoArr = this.getExportData(
          res.data.rows,
          headerArr,
          headerRelation
        )
        // console.log(res)
        // excel：是 @/vendor/Export2Excel 文件中导出的模块
        // export_json_to_excel：将 js 数据转换为 excel
        excel.export_json_to_excel({
          // 表头 header 必填，是一个数组
          header: headerArr,
          // 表格 body 具体数据，是一个二维数组
          data: twoArr,
          filename: 'excel-list', // 文件名称
          autoWidth: true, // 宽度是否自适应
          bookType: 'xlsx' // 生成的文件类型
        })
      })
    },
    // 表格导出的数据格式化方法
    getExportData(rows, headerArr, headerRelation) {
      const resArr = []
      rows.forEach(item => {
        const oneArr = []
        headerArr.forEach(key => {
          const enKey = headerRelation[key]
          oneArr.push(item[enKey])
        })
        resArr.push(oneArr)
      })
      // console.log(resArr)
      return resArr
    },
    // 1.获取表格的数据
    async getEmployeeList() {
      const {
        data: { rows, total }
      } = await getEmployeeList(this.pageOption)
      this.list = rows
      this.total = total
    },
    // 2.声明一个方法用于时间转换
    formateTime(tiem) {
      return dayjs(tiem).format('YYYY-MM-DD')
    },
    // 3.点击页码重新切换表格数据
    currentChangeFn(index) {
      this.pageOption.page = index
      this.getEmployeeList()
    },
    // 4.新增员工--需要调用子组件
    showDialog() {
      this.dialogVisible = true
    },
    closeDialog() {
      this.dialogVisible = false
    },
    refresh() {
      this.getEmployeeList()
      this.dialogVisible = false
    },
    // 5.删除员工数据
    del(row) {
      this.$confirm('确定删除吗', '温馨提示', {
        confirmBottonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delEmployee(row.id)
        this.$message.success('删除员工成功')
        if (this.list.length === 1 && this.pageOption.page > 1) {
          this.pageOption.page--
        }
        this.getEmployeeList()
      })
    }
  }
}
</script>

<style></style>
